<!-- <template>
    <view>
        <view class="search-box">
            <u-search v-model="keywords" @clear="clear" @custom="search" @search="search" :clearabled="true" placeholder="请输入活动关键字"></u-search>
        </view>
        <view class="active-box">
            <u-tabs :activeStyle="{fontSize:'16px',fontWeight:'600'}" lineWidth="60" :list="tabs" @click="cateChange"></u-tabs>
            <view class="active-list" v-if="listData.length>0">
                <view class="active-item" v-for="(item,index) in listData" :key="index">
                    
                    <u-row customStyle="margin-bottom: 10px">
                        <u-col span="5">
                            <image class="ac-img" @click="toPage('/pages/active/detail',{id:item.id})" :src="baseUrl+item.title_image"></image>
                        </u-col>
                        <u-col span="7">
                            <view class="ac-title" @click="toPage('/pages/active/detail',{id:item.id})">{{item.title}}</view>
                            <view class="ac-time">活动时间:{{item.activity_time}}</view>
                            <view class="btn-box">
                                <view class="progress">
                                    进度:{{item.count}}/{{item.quota}}
                                    <u-line-progress :showText="false" height="6" :percentage="parseInt(item.count/item.quota*100)" :activeColor="parseInt(item.count/item.quota*100)>80?'#f0ad4e':'#4cd964'"></u-line-progress>
                                </view>
                                <view class="btn">
                                    <u-button size="mini" @click="toPage('/pages/active/join',{id:item.id})" type="primary" shape="circle" text="立即报名"></u-button>
                                </view>
                            </view>
                        </u-col>
                    </u-row>
                </view>
            </view>
			<u-empty v-else mode="data" text="找不到活动信息"></u-empty>
        </view>
    </view>
</template> -->



<template>
    <view class="content">
        <view class="search-box">
            <u-search placeholder="活动关键字" v-model="keywords" @search="search" @custom="search" @clear="clear"></u-search>
        </view>
        <view class="active-box">
            <u-tabs lineWidth="60" :activeStyle="{'fontSize':'16px','fontWeight':'600'}" :list="tabs" @click="tabsClick"></u-tabs>
            <view class="active-list" v-if="activeList.length>0">
                <view class="active-item" v-for="(item,index) in activeList" :key="index">
                    <u-row customStyle="margin-bottom: 10px">
                        <u-col span="5">
                            <image @click="toPage('/pages/active/detail',{id:item.id})" class="ac-img" :src="baseUrl+item.title_image"></image>
                        </u-col>
                        <u-col span="7">
                            <view class="ac-title" @click="toPage('/pages/active/detail',{id:item.id})">{{item.title}}</view>
                            <view class="ac-time">{{item.activity_time}}</view>
                            <view class="btn-box">
                                <view class="progress">
                                    进度:{{item.count}}/{{item.quota}}
                                    <u-line-progress height="6" :showText="false" :percentage="item.count/item.quota*100" :activeColor="(item.count/item.quota*100)>=80?'#f0ad4e':'#4cd964'"></u-line-progress>
                                </view>
                                <view class="btn">
                                    <u-button @click="toPage('/pages/active/join',{id:item.id})" shape="circle" type="primary" text="立即报名" size="small"></u-button>
                                </view>
                            </view>
                        </u-col>
                    </u-row>
                </view>
            </view>
            <u-empty v-else mode="data" text="找不到活动信息" ></u-empty>
        </view>
    </view>
</template>

<script>
	// export default {
	//         data() {
	//             return {
	//                 keywords:'',
	//                 tabs:[
	//                     {name:"热门推荐",id:undefined},
	//                     {name:"线下活动",id:14},
	//                     {name:"线上活动",id:15},
	//                 ],
	//                 page:1,
	//                 last_page:1,
	//                 listData:[],
	//             }
	//         },
	//         onLoad() {
	            
	//         },
	//         // 页面回到前台时执行数据刷新
	//         onShow() {
	//             this.keywords = this.vuex_keywords
	//             uni.startPullDownRefresh()
	//         },
	//         methods: {
	//             cateChange(e){
	//                 this.category = e.id
	//                 uni.startPullDownRefresh()
	//             },
	//             // 搜索事件
	//             search(){
	//                 if(this.keywords==''){
	//                     uni.showToast({
	//                         title:'请输入关键字',
	//                         icon:"none",
	//                     })
	//                     return false
	//                 }
	//                 uni.startPullDownRefresh()
	//             },
	// 			//清空事件
	// 			clear(){
	// 				this.keywords=''
	// 				 uni.startPullDownRefresh()
	// 			},
	//             getData(){
	//                 let params = {
	//                     page: this.page,
	//                     category: this.category,
	//                     keywords: this.keywords,
	//                     per_page: 6,
	//                 }
	//                 uni.$u.http.get('/activity/index', {params: params}).then((res) => {
	//                     this.page = res.data.current_page // 记录当前页
	//                     this.last_page = res.data.last_page // 记录数据总页数
	//                     this.listData = [...this.listData,...res.data.data] // 把当前页数据添加到当前数据列
	//                     uni.stopPullDownRefresh()  // 数据加载完成停止刷新事件
	//                 })
	//             }
	//         },
	//         // 下拉刷新事件
	//         onPullDownRefresh() {
	//             this.page = 1 // 重置页码
	//             this.listData = [] // 清空数组
	//             this.getData() // 重新加载数据
	//         },
	//         // 上拉触底事件
	//         onReachBottom() {
	//             if(this.page == this.last_page) return false  // 当前页等于总页数，结束加载事件
	//             this.page = ++this.page  // 页码+1
	//             this.getData() // 加载最新页码数据
	//         },
	//     }
	export default {
	        data() {
	            return {
	                keywords:'',
	                tabs:[
	                    {name:'热门推荐',id:''},
	                    {name:'线上活动',id:15},
	                    {name:'线下活动',id:14},
	                ],
	                category:'',
	                activeList:[],
	                page:1, // 当前页
	                totalPage:1,
	                per_page:8,
	            }
	        },
	        onLoad(e) {
	            console.log(e)
	            console.log('onLoad')
	            
	            // this.getData()
	        },
	        onShow() {
	            console.log('onShow')
	            this.keywords = this.vuex_keywords
	            uni.startPullDownRefresh()
	        },
	        onPullDownRefresh() {
	            this.page = 1
	            this.activeList = []
	            this.getData()
	        },
	        onReachBottom() {
	            if (this.page == this.totalPage) return false
	            console.log('onReachBottom')
	            this.page = this.page + 1
	            this.getData()
	        },
	        methods: {
	            search(){
	                if(this.keywords==''){
	                    uni.showToast({
	                        title:'请输入关键字',
	                        icon:'none'
	                    })
	                    return false
	                }
	                uni.startPullDownRefresh()
	            },
	            clear(){
	                uni.startPullDownRefresh()
	            },
	            tabsClick(e){
	                this.category = e.id
	                uni.startPullDownRefresh()
	            },
	            getData(){
	                let params = {
	                    category: this.category,
	                    keywords: this.keywords,
	                    per_page: this.per_page,
	                    page: this.page,
	                }
	                uni.$u.http.get('/activity/index',{params: params}).then((res) => {
	                    if(res.code==1){
	                        this.page = res.data.current_page
	                        this.totalPage = res.data.last_page
	                        this.activeList = [...this.activeList,...res.data.data]
	                        uni.stopPullDownRefresh()
	                    }
	                })
	            }
	        },
	        
	    }
</script>

<style lang="scss">
.search-box{
        padding: 10px 20px;
        /deep/.u-search__action{
            color:#666;
            background-color: #e8e8e8;
            border-radius: 16px;
            padding: 6px 8px;
        }
    }
</style>
